<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import Category from '../components/category/Category.vue'
import ChangeCategory from '../components/category/ChangeCategory.vue'
import GalleryItem from '../components/gallery/GalleryItem.vue'
import request from '../api/index'
const titleFunction = [
  {
    type: 'search',
    placeholder: '请输入标题',
  },
  {
    type: 'button',
    text: '新建',
    typeButton: '',
  }
]
const proxy = getCurrentInstance()?.proxy
const categoryList = ref([])
const galleryList = ref([])
const category = ref(null) 
const url = ref({
  get:'/admin/article/searchArticle',
  getCategory: '/admin/category/searchCategory',
})
const params = ref({
  articleId: undefined,
  categoryId: undefined,
  keyword: undefined,
  type: 1
})
const pagination = ref({
    currentPage: 1,
    pageSize: 14,
    totalCount: 0,
    totalPages: 1
})

const selectCategory = id => {
  pagination.value.currentPage = 1
  params.value.categoryId = id
  getDataList()
}

const updateDate = id => {
  if(id) {
    if (id === params.value.categoryId) {
      category.value.changeCategory(-1)
    }
  }
  getDataList()
}

const inputKeywords = keyword => {
  pagination.value.currentPage = 1
  params.value.keyword = keyword
  getDataList()
}

onMounted(() => { 
  getDataList()
})


const getDataList = body => {
  request.post(url.value.get, {
    page: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
    ...params.value,
    ...body
  }).then(res => {
    if (res.data.status ==='success') {
      galleryList.value = res.data.data
      pagination.value = res.data.pagination
    } else {
      galleryList.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      }
    }
  })

  request.get(url.value.getCategory + '?type=2').then(res => {
    if (res.data.status ==='success') {
      categoryList.value = res.data.data
    } else {
      categoryList.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  }) 
}

const sizeChange = (page) => {
  pagination.value.currentPage = page
  getDataList()
}

</script>

<template>
  <div class="gallery-view">
    <yk-space dir="vertical" :size="24">
      <top-title title="摄影图库" :titleFunction="titleFunction" @search="inputKeywords" :categoryList="categoryList" />
      <Category :categoryList="categoryList" @selectCategory="selectCategory" :type="2" @updateDate="updateDate" ref="category" />
      <yk-space dir="vertical" class="gallery-content">
        <yk-space :size="[15, 24]" wrap style="padding: 0 16px;width:100%">
          <gallery-item  v-if="galleryList.length > 0" v-for="(item, index) in galleryList" :key="item.ID" :galleryInfo="item"/>
          <yk-pagination @change="sizeChange" style="margin-top: 12px;width:100%;justify-content: flex-end;" v-if="galleryList.length > 0" :default-page-size="pagination.pageSize" v-model:current="pagination.currentPage" :total="pagination.totalCount" />
          <yk-empty v-else style="width:100%;">
            <template #description>
              暂无摄影图库
            </template>
          </yk-empty>
        </yk-space>
      </yk-space>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.gallery-view {
  padding: 32px 32px 32px 232px;
  width: 100%;
  background-color: @bg-color-m;

  .gallery-content {
    width: 100%;
    background-color: @bg-color-l;
    padding: 16px 24px;
    height: 100%;
    border-radius: 8px;

    .gallery-image {
      .gallery-img-action {
        opacity: 0;

        :deep(.yk-tooltip__content) {
          width:250px;
        }
        .image-extra-btn {
          height: 30px;
          width: 30px;
          border-radius: 8px;
          background-color: #ffffff8f;
          color:#1e2025;
          line-height: 30px;
          padding: 0 8px;

          &:hover {
            cursor: pointer;
            color: @pcolor;
          }
        }
      }
      &:hover {
       .gallery-img-action {
          opacity: 1;
        }
      }
    }

    .active-img {
      box-shadow: 0px 0px 10px @lcolor-dark;
    }

    .gallery-content-info {
      background-color: @bg-color-m;
      border-radius: 8px;
      height:100%;
      padding:16px;

      :deep(.yk-tooltip__content) {
        width:250px;
      }


      .gallery-action {
        font-size: 18px;
        color:@gray-6;

        &:hover {
          cursor: pointer;
          color:@gray-10;
        }
      }

    }
    
  }
}
</style>